<template>
  <PageWrapper>
    <template #headerContent>
      <h1 style="font-size: 20px; line-height: 40px">手写汉字，感受汉字之美</h1>
    </template>

    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <el-input v-model="value" placeholder="请输入汉字" />
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="handleWrite">确定</el-button>
        </el-col>
      </el-row>
    </el-card>

    <div class="box">
      <img v-for="(itemUrl, index) in list" :key="index" :src="itemUrl" alt="汉字" />
    </div>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { PageWrapper } from '@/components/Page/index'

export default defineComponent({
  components: {
    PageWrapper
  },
  setup() {
    const list = ref<string[]>([])

    const value = ref('')

    function handleWrite() {
      const arr = value.value.trim().split('')
      list.value = arr.map((item) => `https://service.goodcharacters.com/images/han/${item}.gif`)
    }

    return { handleWrite, list, value }
  }
})
</script>

<style lang="scss" scoped>
.box {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;

  img {
    width: 120px;
    height: 120px;
  }
}
</style>
